<template>
  <view class="contaf">
    <div></div>
    <view class="img">
      <image
        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/cadc507f-1f6f-4a0e-b89d-809c801f9559.jpg">
      </image>
    </view>
    <view class="flex">
      <view @click.stop="loginClick(1)" class="button">微信一键登录</view>
      <view @click.stop="loginBtn()" class="button1">暂不登录</view>
      <view class="jiantou">

      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      loginBtn() {
        this.$storageSync('isToken', '1', 3600 * 12)
        uni.switchTab({
          url: '/pages/home'
        })
      },
      loginClick(index) {
        uni.showLoading({
          title: '加载中'
        })
        wx.getUserProfile({
          desc: '用于显示用户头像与昵称', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            uni.setStorageSync('userInfo', res.userInfo);
            this.$toast('登录成功');
            uni.switchTab({
              url: '/pages/home'
            })
          }
        })
        setTimeout(() => {
          uni.hideLoading()
        }, 800)
      }
    }
  }
</script>

<style lang="less">
  .login-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 3;
  }

  .contaf {
    width: 100%;
    height: 100vh;

    .img {
      margin: 80rpx auto;
      width: 300rpx;
      height: 300rpx;
      // border-radius: 20%;

      image {
        width: 300rpx;
        height: 300rpx;
        border-radius: 20%;
      }
    }

    .flex {
      position: relative;
      z-index: 9;
      margin: 580rpx auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .jiantou {
        position: absolute;
        bottom: 40rpx;
        left: 10rpx;
        width: 20px;
        height: 20px;
        background-color: #1AAC1A;
        -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
        animation: move 1s infinite linear alternate;
        transition: all 1s ease;
      }

      .button {
        width: 80%;
        height: 80rpx;
        border-radius: 19rpx;
        background-color: #1AAD19;
        font-size: 34rpx;
        color: #FFFFFF;
        font-weight: bold;
        line-height: 80rpx;
        text-align: center;
      }

      .button1 {
        margin: 20rpx auto;
        width: 80%;
        height: 80rpx;
        border-radius: 19rpx;
        background-color: #dcdcdc;
        font-size: 34rpx;
        color: #848484;
        font-weight: bold;
        line-height: 80rpx;
        text-align: center;
      }
    }
  }

  @keyframes move {
    from {
      left: 5px;
    }

    to {
      left: 20px;
    }
  }
</style>
